<template>
  <div class="doctor-home">
    <!-- 顶部导航 -->
    <van-nav-bar title="医生工作台" fixed />

    <!-- 医生信息卡片 -->
    <div class="doctor-card">
      <van-row>
        <van-col span="16">
          <div class="info">
            <h3>{{ doctorInfo.realName }}</h3>
            <p>{{ doctorInfo.specialty || '暂无专业信息' }}</p>
            <van-tag
              :type="doctorInfo.online ? 'primary' : 'warning'"
              @click="handleOnlineChange(!doctorInfo.online)"
            >
              {{ doctorInfo.online ? '在线接诊中' : '暂停接诊' }}
            </van-tag>
          </div>
        </van-col>
        <van-col span="8">
          <van-image
            round
            width="60"
            height="60"
            :src="doctorInfo.avatar || '/avatar-default.png'"
          />
        </van-col>
      </van-row>
    </div>

    <!-- 统计数据 -->
    <div class="stats-grid">
      <van-grid :column-num="3" :border="false">
        <van-grid-item>
          <template #text>
            <div class="stat-item">
              <span class="number">{{ stats.waitingCount || 0 }}</span>
              <span class="label">待接诊</span>
            </div>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #text>
            <div class="stat-item">
              <span class="number">{{ stats.ongoingCount || 0 }}</span>
              <span class="label">问诊中</span>
            </div>
          </template>
        </van-grid-item>
<!--        <van-grid-item>-->
<!--          <template #text>-->
<!--            <div class="stat-item">-->
<!--              <span class="number">{{ stats.todayCount || 0 }}</span>-->
<!--              <span class="label">今日接诊</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </van-grid-item>-->
        <van-grid-item>
          <template #text>
            <div class="stat-item">
              <span class="number">{{ stats.totalCount || 0 }}</span>
              <span class="label">今日总接诊</span>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 快捷功能 -->
<!--    <div class="quick-actions">-->
<!--      <van-cell-group inset>-->
<!--        <van-cell title="在线接诊" center>-->
<!--          <template #right-icon>-->
<!--            <van-switch v-model="isOnline" @change="handleOnlineChange" />-->
<!--          </template>-->
<!--        </van-cell>-->
<!--      </van-cell-group>-->
<!--    </div>-->

    <!-- 待处理问诊 -->
    <div class="consultation-list">
      <div class="section-header">
        <span class="title">待处理问诊</span>
        <van-button plain type="primary" size="small" to="/doctor/consultation">
          全部问诊
        </van-button>
      </div>

      <van-skeleton title avatar :row="3" v-if="loading" />
      <template v-else>
        <van-empty v-if="consultations.length === 0" description="暂无待处理问诊" />
        <van-cell-group v-else inset>
          <van-cell
            v-for="item in consultations"
            :key="item.id"
            :title="item.patientName"
            :label="formatTime(item.createTime)"
            center
            is-link
            :to="`/doctor/consultation/detail/${item.id}`"
          >
            <template #icon>
              <van-image
                round
                width="40"
                height="40"
                :src="item.patientAvatar || '/avatar-default.png'"
                style="margin-right: 8px"
              />
            </template>
            <template #right-icon>
              <van-tag :type="getStatusType(item.status)">
                {{ getStatusText(item.status) }}
              </van-tag>
            </template>
          </van-cell>
        </van-cell-group>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getDoctorStats, getPendingConsultations, updateServiceStatus } from '@/api/doctor'
import { showSuccessToast, showFailToast } from 'vant'
import dayjs from 'dayjs'

const userStore = useUserStore()
const doctorInfo = ref(userStore.userInfo)
const stats = ref({})
const consultations = ref([])
const loading = ref(false)
const isOnline = ref(doctorInfo.value.online)

// 加载统计数据
const loadStats = async () => {
  try {
    const { data } = await getDoctorStats()
    stats.value = data
  } catch (error) {
    console.error('获取统计数据失败:', error)
    showFailToast('获取统计数据失败')
  }
}

// 加载待处理问诊
const loadConsultations = async () => {
  try {
    loading.value = true
    const { data } = await getPendingConsultations()
    consultations.value = data.records || []
  } catch (error) {
    console.error('获取问诊列表失败:', error)
    showFailToast('获取问诊列表失败')
  } finally {
    loading.value = false
  }
}

// 切换在线状态
const handleOnlineChange = async (value) => {
  try {
    await updateServiceStatus(value)
    showSuccessToast(value ? '已开启接诊' : '已暂停接诊')
    doctorInfo.value.online = value
    userStore.setUserInfo({ ...doctorInfo.value })
  } catch (error) {
    showFailToast('状态更新失败')
  }
}

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('MM-DD HH:mm')
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待接诊',
    1: '问诊中',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'danger'
  }
  return typeMap[status] || 'default'
}

// 页面加载时获取数据
onMounted(() => {
  loadStats()
  loadConsultations()
})
</script>

<style lang="scss" scoped>
.doctor-home {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  padding-bottom: 60px;

  .doctor-card {
    margin: 12px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;

    .info {
      h3 {
        margin: 0;
        font-size: 18px;
        color: #323233;
      }
      p {
        margin: 4px 0;
        font-size: 14px;
        color: #969799;
      }
    }
  }

  .stats-grid {
    margin: 12px;
    background-color: #fff;
    border-radius: 8px;

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .number {
        font-size: 20px;
        font-weight: bold;
        color: #1989fa;
      }

      .label {
        font-size: 12px;
        color: #969799;
        margin-top: 4px;
      }
    }
  }

  .quick-actions {
    margin: 12px;
  }

  .consultation-list {
    margin: 12px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #323233;
      }
    }
  }
}
</style>
